<template>
  <div class="goods">
     <div class="menu-wrapper" ref="menuWrapper" >
         <ul>
            <li v-for="(item,index) in goods" class="menu-item" :class="{current:currentIndex===index}" @click="selectMenu(index,$event)">
                <span class="text border-1px">
                       <span v-show="item.type>0" class="icon"  :class="classMap[item.type]"> </span>
                  {{item.name}}
                </span>
            </li>
         </ul>
     </div>
     <div class="foods-wrapper" ref="foodsWrapper">
         <ul>
           <li v-for="item in goods" class="food-list food-list-hook" >
               <h1 class="title">{{item.name}}</h1>
               <ul>
                  <li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px">
                        <div class="icon">
                            <img :src="food.icon"/>
                        </div>
                        <div class="content">
                          <h2 class="name">{{food.name}}</h2>
                          <p class="desc">{{food.description}}</p>
                          <div class="extra">
                            <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.ration}}%</span>
                          </div>
                          <div class="price">
                             <span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                          </div>
                          <div class="cartcontrol-wrapper">
                              <cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
                          </div>
                        </div>
                  </li>
               </ul>
           </li>
         </ul>
     </div>

    <shopcart ref="shopcart"   :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice" ></shopcart>

    <food ref="food" :food="selectedFood"></food>
  </div>

</template>

<script>
  import BScroll from 'better-scroll';
  import shopcart from '@/components/shopcart/shopcart';
  import cartcontrol from '@/components/cartcontrol/cartcontrol';
  import food from '@/components/food/food';
  const ERR_OK=0;
    export default {
        name: "goods",
      components:{
        shopcart,
        cartcontrol,
        food
      },
       props:{
          seller:{
            type:Object
          }
       },
      data(){
          return {
            goods:[],
            listHeight:[],
            scrollY:0,
            selectedFood:{}
          }
      },
      computed:{
        currentIndex(){
           for(let i=0;i<this.listHeight.length;i++){
              let height1=this.listHeight[i];
              let height2=this.listHeight[i+1];
              if(!height2||(this.scrollY>height1&&this.scrollY<height2)){
                 return i;
              }
           }
          return 0;
        },
        selectFoods(){
           let foods=[];
           this.goods.forEach((good)=>{
              good.foods.forEach((food)=>{
                  if(food.count){
                     foods.push(food);
                  }
              })
           })

          return foods;
        }
      },
      mounted(){
      },
      created(){

        this.classMap=['decrease','discount','special','invoice','guarantee']

          this.$ajax.get("/api/goods").then((response)=>{
            if(response.data.errno===ERR_OK){
              this.goods=response.data.data;
              this.$nextTick(()=>{
                  this._initScroll();
                  this._calculateHeight();
              })
              console.log(this.goods);
            }

          })
            .catch(error=>{
              console.log(error)
            })
      },
      methods:{
        selectFood(food,event){
          if(!event._constructed){//如果pc
            return;
          }

          this.selectedFood=food;

          this.$refs['food'].show();

        },
        _drop(target){
          //体验优化，异步执行下落动画
          this.$nextTick(()=>{
            this.$refs['shopcart'].drop(target);
          })
        },
        cartAdd (el) {
          // dom元素更新后执行， 因此此处能正确打印出更改之后的值；
          this.$nextTick(() => {
            // 调用shopcart组件的drop()函数
            this.$refs['shopcart'].drop(el);
          });
        },
        selectMenu(index,event){
          if(!event._constructed){//如果pc
             return;
          }
          let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
          let el=foodList[index];
           this.foodScroll.scrollToElement(el,300);
          console.log(index);
        },
          _initScroll(){
            this.meunScroll=new BScroll(this.$refs.menuWrapper,{click:true});
            this.foodScroll=new BScroll(this.$refs.foodsWrapper,{click:true,
              probeType:3
            });//监听时时流动的位置

            this.foodScroll.on('scroll',(pos)=>{ // 时时滚动的时候就可以得到 滚动条的位置的值
               this.scrollY=Math.abs(Math.round( pos.y));
               console.log("滚动条的高度:"+this.scrollY);
            })
          },
        _calculateHeight(){
              let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
              let height=0;
              this.listHeight.push(height);
              for(let i=0;i<foodList.length;i++){
                let item=foodList[i];
                height+=item.clientHeight;
                this.listHeight.push(height);
              }
              console.log(this.listHeight);
        }
      }
    }
</script>

<style lang="less" scoped>
  @import "../../common/stylus/mlxin";
  .goods{
    display: flex;
    position: absolute;
    top:174px;
    bottom: 46px;
    width: 100%;
    overflow: hidden;
    .menu-wrapper{
      flex: 0 0 80px;//等分 缩放情况 点位空间
      width: 80px;
      background: #f3f5f7;
      .menu-item{
        display: table;
        height: 54px;
        width: 56px;
        line-height: 14px;
        padding: 0 12px;
        &.current{
          position: relative;
          z-index: 10;
          margin-top: -1px;
          background: #fff;
          font-weight: 700;
          .text{
            .border-none()
          }
        }
        .icon{
          display: inline-block;
          vertical-align: top;
          height: 12px;
          width: 12px;
          margin-right: 2px;
          background-size: 12px 12px;
          background-repeat: no-repeat;
          &.decrease{
            .bg-image-decrease();
          }
          &.discount{
            .bg-image-discount();
          }
          &.guarantee{
            .bg-image-guarantee();
          }
          &.invoice{
            .bg-image-invoice();
          }
          &.special{
            .bg-image-special();
          }
        }
        .text{
          display: table-cell;
          width: 56px;
          vertical-align: middle;
          font-size: 12px;
        }
      }
    }
    .foods-wrapper{
        flex: 1;
       .title{
         padding-left: 14px;
         height: 26px;
         line-height: 26px;
         border-left: 2px solid #d9dde1;
         font-size: 12px;
         color:rgb(147,153,159);
         background: #f3f5f7;
       }
      .food-item{
        display: flex;
        margin: 18px;
        padding-bottom:18px;
        &:last-child{
          .border-none()
        }
        .icon{
          flex:0 0 57px;
          margin-right: 10px;
        }
        .content{
          flex: 1;
          .name{
             margin:2px 0 8px 0;
             height: 14px;
              line-height: 14px;
             font-size: 14px;
            color:rgb(7,17,27)
          }
          .desc,.extra{
            line-height: 10px;
            font-size: 10px;
            color:rgb(147,153,159);
          }
          .desc{
            margin-bottom: 8px;
            line-height: 12px;
          }
          .extra{
            .count{
              margin-right: 12px;
            }
            }
          .price{
            font-weight: 700;
            line-height: 24px;
            .now{
              margin-right: 8px;
              font-size: 14px;
              color:rgb(240,20,20)
            }
            .old{
              text-decoration: line-through;
              font-size: 10px;
            }


          }

          .cartcontrol-wrapper{
             position: absolute;
             right: 0;
              bottom: 12px;
          }
        }
      }
    }
  }
</style>
